import Pdf from './pdf';
import React, { Component } from 'react';
import { fabric } from "fabric";
import { Button } from 'antd';
import "../css/pdf_final.css"
import logo from "../assets/tuzhang.png"
import Upload1 from "./Upload1"

export default class Pdf_final extends Component {

    constructor() {
        super()
        this.state = {
            canvas: null,
            // 上传的图片的地址
            url:"",
           

        }
     
        this.addSignature=this.addSignature.bind(this)
        this.renderFabric=this.renderFabric.bind(this)
       
    }
    static   getDerivedStateFromProps (nextProps, prevState){

    }

    componentDidMount() {
        // 设置画布的大小（先写死）
        // document.querySelector(".elesign").style.width="300px"
        // this.renderFabric()
        // this.canvasEvents();
    }
    componentDidUpdate() {
        this.renderFabric()
    }

    componentWillUnmount() {
        this.renderFabric()
    }
    // 生成绘图区域
    renderFabric() {
        let canvaEle = document.querySelector("#ele-canvas");
        canvaEle.width = 300;
        canvaEle.height = 400;

        this.canvas = new fabric.Canvas(canvaEle);
        let container = document.querySelector(".canvas-container");
        container.style.position = "absolute";
        container.margin = "10px auto"
        container.style.top = "0";
        console.log(this.canvas);




    }

    // 相关事件操作哟
    canvasEvents() {
        // 拖拽边界 不能将图片拖拽到绘图区域外
        // console.log(this.canvas)
        this.canvas.on("object:moving", function (e) {
            var obj = e.target;

            if (obj.height > obj.canvas.height || obj.width > obj.canvas.width) {
                obj.setScaleY(obj.originalState.scaleY);
                obj.setScaleX(obj.originalState.scaleX);
            }
            obj.setCoords();
            if (
                obj.getBoundingRect().top - obj.cornerSize / 2 < 0 ||
                obj.getBoundingRect().left - obj.cornerSize / 2 < 0
            ) {
                obj.top = Math.max(
                    obj.top,
                    obj.top - obj.getBoundingRect().top + obj.cornerSize / 2
                );
                obj.left = Math.max(
                    obj.left,
                    obj.left - obj.getBoundingRect().left + obj.cornerSize / 2
                );
            }
            if (
                obj.getBoundingRect().top +
                obj.getBoundingRect().height +
                obj.cornerSize >
                obj.canvas.height ||
                obj.getBoundingRect().left +
                obj.getBoundingRect().width +
                obj.cornerSize >
                obj.canvas.width
            ) {
                obj.top = Math.min(
                    obj.top,
                    obj.canvas.height -
                    obj.getBoundingRect().height +
                    obj.top -
                    obj.getBoundingRect().top -
                    obj.cornerSize / 2
                );
                obj.left = Math.min(
                    obj.left,
                    obj.canvas.width -
                    obj.getBoundingRect().width +
                    obj.left -
                    obj.getBoundingRect().left -
                    obj.cornerSize / 2
                );
            }
        });
    }

    
    // 添加签章
    addSignature(url) {
        // this.renderFabric()
        // this.renderFabric()
        fabric.Image.fromURL(
            //   `http://${window.location.host}/src/assets/default-touxiang.png`,
            // logo,
            url?url:logo,
            (oImg) => {
                oImg.set({
                    left: 300 / 2 - 50,
                    top: 400 / 2 - 100,
                    width: 300,
                    height: 300,
                    angle: 0,
                    scaleX: 0.6,
                    scaleY: 0.6,
                });
                oImg.scale(0.5); //图片缩小一半
                console.log(url)
                console.log("diaoyonle ")
                this.canvas.add(oImg);
               
            }
        );

        // var rect = new fabric.Rect({
        //     left: 100, //距离画布左侧的距离，单位是像素
        //     top: 100, //距离画布上边的距离
        //     fill: 'red', //填充的颜色
        //     width: 20, //方形的宽度
        //     height: 20 //方形的高度
        //   });
        //   rect.set('selectable',true)
        //   this.canvas.add(rect);


        // let imgElement = document.getElementById("img"); //声明我们的图片
        // let imgInstance = new fabric.Image(imgElement, {
        //   //设置图片位置和样子
        //   left: 100,
        //   top: 100,
        //   width: 200,
        //   height: 200,
        //   angle: 30, //设置图形顺时针旋转角度
        // });
        // this.canvas.add(imgInstance);
    }

    //   删除签章
    delSignature() {
        this.canvas.remove(this.canvas.getObjects()[0]);
    }


   
    render() {
        return (

            <><div style={{ display: "flex", minWidth: "700px" }}>
                <div className='elesign' style={{width:"90%", display: "flex", flexDirection: "column" }}>
                    <div style={{ margin: "10px auto", position: "relative" }}>
                        {/* pdf的预览 */}
                        <div >
                            <Pdf></Pdf>
                        </div>
                        {/* 盖章部分 */}
                        <canvas id="ele-canvas"></canvas>
                    </div>
                    {/* 按钮 */}
                    <section >
                        <Button type="primary" onClick={() => this.addSignature()}>添加签章</Button>
                        <Button onClick={() => this.delSignature()}>删除签章</Button>
                    </section>
                </div>
                <div style={{width:"20%",height:"100px"}}>
                    <Upload1 addSignature={this.addSignature}></Upload1>
                </div>

            </div>




            </>
        )
    }
}